<template>
  <div class="home">
    <el-container>
      <el-header style="text-align: right; position: relative; font-size: 12px">
        <div class="LeftIcon">
          <div class="Icon">
            <i class="el-icon-phone"></i>
          </div>
          <div class="Text">智联物流</div>
        </div>
        <!-- <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->

        <!-- <span>
          <el-button round name="type">{{
            this.$store.state.InfoUser.username
          }}</el-button></span
        > -->
        <span>
          <el-button round type="warning" @click="tc()"
            >退出登录</el-button
          ></span
        >
      </el-header>
    </el-container>

    <el-container
      style="height: 890px; border: 1px solid #eee  position: absolute;"
    >
      <el-aside width="250px">
        <el-menu
          background-color="#fff"
          text-color="#909399"
          active-text-color="#409eff"
          router
          :default-active="this.$router.path"
          unique-opened
        >
          <el-submenu
            v-for="(item, index) in menuObj"
            :key="item.mid"
            :index="index + ''"
          >
            <template slot="title">
              <i :class="item.icon" id="ztname1">{{ item.menuName }}</i>
            </template>
            <el-submenu
              v-for="(ite, index) in item.children"
              :key="ite.mid"
              :index="index + '' + ite.menuLinkUrl"
            >
              <el-menu-item slot="title" :index="ite.menuLinkUrl">
                <span class="ztname"> {{ ite.menuName }}</span>
              </el-menu-item>
              <el-menu-item
                v-for="it in ite.children"
                :key="it.mid"
                :index="it.menuLinkUrl"
              >
                <template slot="title">
                  <span class="ztname" style="padding-left: 70px">
                    {{ it.menuName }}</span
                  >
                </template>
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container class="imgg" direction="vertical">
        <div style="padding: 20px; margin-top: 10px">
          <el-main
            style="
              background: #fff;
              padding: 20px;
              border-radius: 5px;
              margin-top: 10px;
            "
          >
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/home/first' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item
                v-for="item in this.$store.state.breadcrunmbName"
                :key="item.id"
                >{{ item }}</el-breadcrumb-item
              >
            </el-breadcrumb>
          </el-main>
        </div>

        <el-main>

          <router-view
            style="background: #fff; padding: 20px; border-radius: 5px"
          >
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>




<script>
import Vue from "vue";
import axios from "axios";
var deptMap = new Map();
export default {
  data() {


     // 以下是与echers无关的
    const item = { date: "2016-05-02",  name: "王小虎",  address: "上海市普陀区金沙江路 1518 弄",};
    return {




      // 以下是与echers无关的
      tableData: Array(20).fill(item),
      menuData: [],
      ss: { id: "" },
      fucai: [],
      zicai1: [],
      zicai5: [],
      zicai11: [],
      zicai13: [],
      zicai15: [],
      arr: [ { name: "1", index: "a" },{ name: "2", index: "b" },],
      menuObj: {},
    };
  },
  created() {
    axios.get(  "/api/findMenuList?name=" + JSON.parse(sessionStorage.getItem("user")) ).then((aa) => { 
      // console.log(aa.data); 
      this.menuObj = aa.data; });
    this.$store.commit("getUsers");
  },
  methods: {

    // 以下是与echarts无关的
    tc() {
      sessionStorage.removeItem("user");
      this.$router.push("/login");
    },
    infoSum(index) {
      console.log("==" + index);
      return index;
    },
  },
};
</script>

<style scoped>
.elmaindemo {
  position: relative;
  top: -40px;
  /* right: 10px;*/
  width: 100%;
  /* height: 5%; */
  border: 10%;
  background-color: #f3f4f7;
}
/* 以上是echarts */
.LeftIcon {
  width: 200px;
  height: 100%;
  position: absolute;
  left: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.LeftIcon .Icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #409eff;
}
.LeftIcon .Text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  color: #409eff;
}

.el-header {
  /* background-color: aquamarine; */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.19);
  color: #333;
  z-index: 999;
  line-height: 60px;
  /* background: url(https://seopic.699pic.com/photo/40158/4308.jpg_wh1200.jpg);   */
}

.el-aside {
  color: #333;
}
.el-col {
  border-radius: 4px;
}
.el-footer {
  color: #333;
  line-height: 60px;
}
</style>